import React, { Component } from "react";
import { connect } from 'react-redux';
import userImg from "../images/user_img.png";
import Slider from "react-slick";
import axios from "axios";
class RecordPerformanceTable extends Component{
  state={
    in:{
      hole:[],
      par:[],
      status:[]
    },
    out:{
      hole:[],
      par:[],
      status:[]
    },
    round:"ROUND1"
  }
  componentDidMount(){
    axios.get(`/Tgh/data/score_query?match_id=${this.props.match.params.id}`).then(res=>{
      this.setState({
        in:res.data.in,
        out:res.data.out,
        round:res.data.round.toUpperCase()
      })
    })
  }
  render(){
    let nickName = "", img=userImg;
    if(this.props.user){
      nickName = this.props.user.nickName;
      if(this.props.user.img){
        img = `/images/${this.props.user.img}`
      }
    }
    return(
      <div>
        <div className="top-title">
          <i
            className="fa fa-angle-left back"
            onClick={() => this.props.history.go(-1)}
          />
          战绩详情数据
        </div>
        <div className="performance-top">
          <div className="performance-user-img" style={{backgroundImage:`url(${img})`}}></div>
          <div className="performance-user-name">你好，{nickName || "用户"}</div>
        </div>
        <div className="per-table-contain">
          {this.renderTable()}
        </div>
        <div className="note">
          <div><span className="doubleEagle"></span>双鹰</div>
          <div><span className="eagle"></span>老鹰球</div>
          <div><span className="birdie"></span>小鸟球</div>
          <div><span className="par"></span>平标准杆</div>
          <div><span className="bogey"></span>柏忌</div>
          <div><span className="doubleBogey"></span>双柏忌</div>
          <div><span className="moreBogey"></span>+3或以上</div>
        </div>
      </div>
    )
  }
  renderTable(){
  // banner的设置
    var settings = {
      dots: true,
      infinite: false,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
    };
    return(
      <Slider ref={c => (this.slider = c)} {...settings}>
        <div>
          {this.renderOutTable()}
        </div>
        <div>
          {this.renderInTable()}
        </div>
      </Slider>
    )
  }
  // 渲染前9洞的成绩
  renderOutTable(){
    let partotal = 0;
    return(
      <table border="1" className="performance-table">
        <thead>
          <tr>
            <td>HOLE</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>OUT</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>PAR</td>
            {this.state.out.par.map((data,idx)=>{
              partotal += parseInt(data,10);
              return(
                <td key={idx}>{data || ""}</td>
              )
            })}
            <td>{partotal || "-"}</td>
          </tr>
          <tr>
            <td>{this.state.round}</td>
            {this.renderDiffScore(this.state.out.hole || [], this.state.out.par)}
          </tr>
          <tr>
            <td>STAUTS</td>
            {this.renderDiffStatus(this.state.out.status || [])}
          </tr>
        </tbody>
      </table>
    )
  }
  // 渲染后9洞的成绩
  renderInTable(){
    let partotal = 0;
    return(
      <table border="1" className="performance-table">
        <thead>
          <tr>
            <td>HOLE</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>IN</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>PAR</td>
            {this.state.in.par.map((data,idx)=>{
              partotal += parseInt(data,10);
              return(
                <td key={idx}>{data}</td>
              )
            })}
            <td>{partotal || "-"}</td>
          </tr>
          <tr>
            <td>{this.state.round}</td>
            {this.renderDiffScore(this.state.in.hole || [], this.state.in.par)}
          </tr>
          <tr>
            <td>STAUTS</td>
            {this.renderDiffStatus(this.state.in.status || [])}
          </tr>
        </tbody>
      </table>
    )
  }
  // 有无成绩的情况处理
  renderDiffScore(holeArr,parArr){
    let holetotal = 0;
    let holeScore = [];
    let className = "";
    for(let idx = 0; idx < 9; idx++){
      const score = parseInt(holeArr[idx],10) || "-"
      holetotal += parseInt(holeArr[idx],10);
      className = this.judgeClassName(holeArr[idx],parArr[idx]);
      holeScore.push(<td key={idx} className={className}>{score}</td>)
    }
    return (
      <React.Fragment>
        {holeScore}
        <td>{holetotal || "-"}</td>
      </React.Fragment>
    )
  }
  // 有无status的处理
  renderDiffStatus(arr){
    let statusArr = [];
    for(let idx = 0; idx < 9; idx++){
      statusArr.push(<td key={idx}>{parseInt(arr[idx],10) || "-"}</td>)
    }
    return (
      <React.Fragment>
        {statusArr}
        <td>-</td>
      </React.Fragment>
    )
  }
  // 判断球型
  judgeClassName(data,par){
    let hole = parseInt(data,10);
    let score = parseInt(par,10);
    if(hole-score === -1){
      return "birdie"
    }
    if(hole-score === -2){
      return "eagle"
    }
    if(hole-score === -3){
      return "doubleEagle"
    }
    if(hole-score === 1){
      return "bogey"
    }
    if(hole-score === 2){
      return "doubleBogey"
    }
    if(hole-score >= 3){
      return "moreBogey"
    }
    return "";
  }
}

function mapStateToProps(state) {
  const { user, error } = state.auth;
  return { user, error };
}
export default connect(mapStateToProps)(RecordPerformanceTable);